<script setup>
import avatar from '@/assets/images/active.jpg'
import { ref } from 'vue'

// 上传图片
let inputImg
const imgData = ref({
  url: '',
  width: '',
  height: ''
})
const uploadImage = async () => {
  inputImg = null
  inputImg = document.createElement('input')
  inputImg.type = 'file'
  inputImg.accept = 'image/*'
  inputImg.style.display = 'none'
  inputImg.addEventListener('change', handleChange)
  document.body.appendChild(inputImg)
  inputImg.click()
}
const handleChange = (event) => {
  const file = event.target.files[0]
  const reader = new FileReader()
  reader.readAsDataURL(file)
  reader.onload = (e) => {
    imgData.value.url = e.target.result
    const img = new Image()
    img.src = e.target.result
    img.onload = (e) => {
      if (img.width > img.height) {
        imgData.value.width = 180
        imgData.value.height = img.height * (180 / img.width)
      } else if (img.width < img.height) {
        imgData.value.height = 180
        imgData.value.width = img.width * (180 / img.height)
      } else {
        imgData.value.width = 180
        imgData.value.height = 180
      }
    }
  }
  inputImg.removeEventListener('change', handleChange)
  document.body.removeChild(inputImg)
}

/**
 *  上传图片裁剪回调函数
 *  @param {Number} cutWidth 裁剪宽度
 *  @param {Number} cutHeight 裁剪高度
 *  @param {Number} cutX 裁剪X轴坐标
 *  @param {Number} cutY 裁剪Y轴坐标
 *  @param {Object} preview 裁剪图片对象
 **/
const uploadCutResult = (cutWidth, cutHeight, cutX, cutY, preview) => {
  const cvs = document.createElement('canvas')
  cvs.width = 200
  cvs.height = 200
  const ctx = cvs.getContext('2d')
  ctx.drawImage(preview, cutX, cutY, cutWidth, cutHeight, 0, 0, cvs.width, cvs.height)
  const canvasDom = document.querySelector('.canvas')
  canvasDom.appendChild(cvs)
}
</script>

<template>
  <div class="user">
    <div class="user_w centre">
      <el-button type="primary" @click="uploadImage">上传图片</el-button>
      <div class="avatar">
        <img :src="avatar" alt="" />
      </div>
      <div class="dom" v-if="imgData.url">
        <div class="imgAc">
          <div
            class="imgAcDom"
            :style="{ width: imgData.width + 'px', height: imgData.height + 'px' }"
          >
            <img
              :src="imgData.url"
              alt=""
              :style="{ width: imgData.width + 'px', height: imgData.height + 'px' }"
            />
            <div
              class="shears"
              :style="{ width: imgData.width + 'px', height: imgData.height + 'px' }"
            ></div>
          </div>
        </div>
        <div class="canvas"></div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.centre {
  margin: auto;
  width: 1200px;
}
.user {
  .user_w {
    background: #ccc;
    .avatar {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .dom {
      display: flex;
      height: 200px;
      .imgAc {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 180px;
        height: 180px;
        background-color: #000;
        border-radius: 4px;
        border: 1px solid #e5e9ef;
        .imgAcDom {
          position: relative;
        }
        .img {
          width: 100%;
          height: 100%;
          object-fit: cover; /* 等比例铺满容器 */
          object-position: center; /* 图片居中显示 */
        }
      }
    }
  }
}
</style>
